<template>
  <div class="box">
    <div class="box2">
      <div class="info" v-for="i in 4" :key="i">
        <h2>专属好店</h2>
        <div class="shopbox" v-for="mount in 8" :key="mount">
          <img
            src="../../assets/Screenshot_2022-02-19-10-26-34-15_a173b174840b623_03.png"
            alt=""
          />
          <div class="right">
            <h3>38oc辣椒炒肉(高新店)</h3>
            <p>
              <span class="s1">5元双重补贴...</span>
              <span class="s2">34分钟</span>
              <span class="s3">2.0km</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  width: 100%;
  height: 5.68rem;
  overflow: auto;
  font-size: 0.16rem;
}
.box2 {
  min-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.info {
  border-radius: 0.1rem;
  width: 2.6rem;
  height: 5.6rem;
  margin-left: 0.1rem;
  background-color: rgb(230, 247, 253);
  border: 1px solid rgb(203, 238, 252);
  flex-shrink: 0;
  background-image: linear-gradient(
    rgb(230, 247, 253),
    rgb(241, 249, 252),
    rgb(241, 246, 248),
    rgb(255, 255, 255)
  );
}

.box::-webkit-scrollbar {
  display: none;
}
.info > h2 {
  margin: 0.16rem 0 0.08rem 0.1rem;
  color: rgb(0, 183, 255);
  font-weight: 700;
}
.shopbox {
  width: 2.6rem;
  height: 0.62rem;
  padding: 0 0.1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.12rem;
}
.shopbox > img {
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 0.1rem;
}
.right {
  margin-left: 0.08rem;
}
h3 {
  font-weight: 700;
  margin-bottom: 0.1rem;
  font-size: 0.14rem;
  color: rgb(77, 73, 73);
}
.s2 {
  margin-left: 0.1rem;
  color: rgb(199, 199, 199);
}
.s3 {
  margin-left: 0.1rem;
  color: rgb(199, 199, 199);
}
.s1 {
  color: red;
}
</style>